
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,,minimum-scale=1,maximum-scale=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta content="telephone=no" name="format-detection">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/common.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/css/style.css">
    <script src="__TMPL__Public/assets/js/jquery-v1.10.2.min.js"></script>
    <script type="text/javascript" src="__TMPL__Public/assets/js/common.js"></script>
    <script type="text/javascript" src="__TMPL__Public/assets/layer/layer.js"></script>
    <style type="text/css">
        body{background: #fff;}
        .cart-list{padding-top: .4rem;}
        .cart-list li{padding-left: .85rem; padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid #ebebeb; position: relative;}
        .cart-item-pic{width: 1.28rem; height: 1.28rem;}
        .cart-item-pic img{width: 100%; height: 100%;}
        .cart-item-info{margin-left: .2rem;}
        .cart-item-info h3 a{display: block; font-size: .3rem; height: .3rem; line-height: .3rem; font-weight: normal; width: 3.7rem; white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
        .size-color{font-size: .28rem; color: #808080; margin-top: .05rem;}
        .size-color span{display: inline-block; margin-right: .2rem;}
        /*选择数量*/
        .select-num{display: inline-block; padding: 0 0.7rem; height: 0.48rem; border:1px solid #e1dfe0; border-radius: 2px; background: #f4f4f4; margin-top: .05rem; line-height: .48rem; text-align: center;position: relative;}
        .select-num span{position: absolute; display: inline-block; width: .48rem; height: .45rem; line-height: .45rem; vertical-align: middle; font-size: .35rem;}
        .select-num em{font-size: .3rem;}
        .deduct-num{left: 0; top:0; border-right: 1px solid #e1dfe0;}
        .plus-num{right: 0; top:0; border-left: 1px solid #e1dfe0; }
        .cart-price{position: absolute; bottom: .5rem; right: .3rem; font-size: .32rem; color: #8bc2e9;}
        .cart-delet{width: .61rem; height: .63rem; display: inline-block; background: url(__TMPL__Public/assets/img/icon-delet.png) center center no-repeat; background-size: cover; position: absolute; right: 0.4rem; top: .1rem;}
        .cart-select{position: absolute; left: .2rem; top: .45rem; display: inline-block; height: .41rem; width: .41rem;  background: url(__TMPL__Public/assets/img/icon-select.png) center center no-repeat; background-size:cover;}
        .selected{background: url(__TMPL__Public/assets/img/icon-selected.png) center center no-repeat; background-size:cover; }

        /*底部*/
        .footer-pay{position: fixed; bottom: 0; left: 0; width: 100%; height: 1.15rem; background: #fff; border-top: 1px solid #d3d3d3; z-index: 10000;}
        .select-all{height: 100%; line-height: 1.15rem; padding-left: 1rem; font-size: .3rem; color: #6c7579; position: relative;}
        .select-all span{position: absolute; left: .3rem; top: .35rem; display: inline-block; height: .41rem; width: .41rem; border-radius: 50%; background: url(__TMPL__Public/assets/img/icon-select.png) center center no-repeat; background-size:cover;}
        .select-all span.selected{background: url(__TMPL__Public/assets/img/icon-selected.png) center center no-repeat; background-size:cover;}
        .pay-btn{display: inline-block; height: 100%; line-height: 1.15rem; text-align: center; font-size: .32rem; width: 2.45rem; background: #ff6569; color: #fff;}
        .tatal-num {display: inline-block; height: 100%; line-height: 1.15rem; font-size: .3rem; color: #6c7579; margin-right: .4rem;}
        .tatal-num em{color: #ff6569; }
        .store-count-cls{padding:.1rem;color:red;}
        .layui-layer-btn a{
            width:45%;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $('.header .menu').click(function(){window.history.back();})
            //删除
            $('.content').on("click",".cart-list li .cart-delet",function(){
                var mthis = $(this).closest("li");
                var cartid = mthis.find(".cartid").val();
                myconfirm('您是否要删除？',
                        ['确认','取消']
                        ,function(){
                            $.post("{:U('shop/cartdel')}",
                                    {'cartid':cartid},
                                    function(data){
                                        if(data.status==1){
                                            mthis.remove();
                                            setGoodsPrice();
                                        }else{
                                            myalert(data.msg);
                                        }
                                    },"json");
                        });
            });
            //全选
            $(".select-all").on('click',function(){
                $(".select-all span").toggleClass('selected');
                if($(".select-all span").hasClass('selected')){
                    $(".cart-list li .cart-select").each(function(index){
                        $(this).addClass('selected');
                        $('.check').attr('checked',true);
                    });
                }else{
                    $(".cart-list li .cart-select").each(function(index){
                        $(this).removeClass('selected');
                        $('.check').removeAttr('checked');
                    });
                }
                var seled=$(".select-all span").hasClass('selected')?1:0;
                setCartSel(seled);
            });
            //单选
            $('.content').on('click','.cart-list li .cart-select',function(){
                $(this).toggleClass('selected');
                if($(this).hasClass('selected')){
                    if(!$(".select-all span").hasClass("selected")){
                        setSelAll();
                    }
                    $(this).find('.check').attr('checked',true);
                }else{
                    if($(".select-all span").hasClass("selected")){
                        $(".select-all span").removeClass("selected");
                        $(this).find('.check').removeAttr('checked');
                    }
                }
                var seled=$(this).hasClass('selected')?1:0;
                var cartid=$(this).closest("li").find(".cartid").val();
                setCartSel(seled,cartid);
            });
            //全选
            setSelAll();
            //+ -
            $(".content").on("click",".deduct-num",function(){
                var mli=$(this).closest('li');
                var num=mli.find('.goods-num-cls').html();
                var cartid=mli.find('.cartid').val();
                if(num<2){
                    num=1;
                }else{
                    --num;
                }
                mli.find('.goods-num-cls').html(num);
                mli.find('.goods-num').val(num);
                setGoodsNum(cartid,num);
            });
            $(".content").on("click",".plus-num",function(){
                var mli=$(this).closest('li');
                var num=mli.find('.goods-num-cls').html();
                var cartid=mli.find('.cartid').val();
                if(num<1){
                    num=1;
                }else{
                    ++num;
                }
                mli.find('.goods-num-cls').html(num);
                mli.find('.goods-num').val(num);
                setGoodsNum(cartid,num);
            });
        });
        function myalert(con){
            layer.alert(con,{title:false,closeBtn: 0,btn:false,time:1500});
        }
        function myconfirm(con,btn,fun){
            layer.open({
                content:con,
                title:false,
                closeBtn:false,
                btnAlign:'c',
                btn:btn,
                yes:function(index){
                    fun();
                    layer.close(index);
                }
            });
        }
        function setGoodsPrice(){
            var price=0;
            $(".cart-list li .cart-select.selected").each(function(){
                var mli=$(this).closest("li");
                var p=Number(mli.find(".cart-price-cls").html());
                var n=Number(mli.find(".goods-num-cls").html());
                price+=p*n;
            });
            $(".price-num").html("￥"+price);
            setGoodsCount();
        }
        function setGoodsCount(){
            var count=0;
            $(".cart-list li .cart-select.selected").each(function(){
                var mli=$(this).closest("li");
                //	var p=Number(mli.find(".cart-price-cls").html());
                var n=Number(mli.find(".goods-num-cls").html());
                count+=n;
            });
            $(".goods-count").html("("+count+")");
            return count;
        }
        function setGoodsNum(cartid,num){
            var data={'cartid':cartid,'num':num};
            $.post("{:U('shop/cartnum')}",data);
            setGoodsPrice();
        }
        function setSelAll(){
            var boo=true;
            $(".cart-list li .cart-select").each(function(index){
                if(!$(this).hasClass('selected')){
                    boo=false;
                    return false;
                }
            });
            if(boo){
                $(".select-all span").addClass("selected");
            }
            setGoodsPrice();
        }
        function setCartSel(sel,cartid){
            var data={'selected':sel};
            data.type='2';
            if(cartid){
                data.cart_id=cartid;
            }
            $.post("/index.php/Mobile/order/cartSel.html",data);
                setGoodsPrice();
        }
    </script>
</head>
<body>
<div class="header">
    <div class="menu">
        <span class="back-menu"></span>返回
    </div>
    购物车
    <a href="wap-login.html" class="register-right"></a>
</div>
<div class="content" style="margin-top:1.05rem;">
    <form method="get" action="{:U('shop/sorder')}">
        <ul class="cart-list">
            <foreach name="carts" item="vo">
            <li>
                <input type="hidden" class="cartid" value="{$vo.cartid}">
                <div class="cart-item clearfix">
                    <div class="cart-item-pic fl">
                        <a href="javascript:;">
                            <img src="__UPLOAD__{$vo.smeta.thumb}">
                        </a>
                    </div>
                    <div class="cart-item-info fl">
                        <h3><a href="javascript:;">{$vo.shop_title}</a></h3>
                        <p class="size-color"><span>{$vo.size_name}</span> </p>
                        <div class="select-num">
                            <span class="deduct-num">-</span>
                            <em class="goods-num-cls">{$vo.shop_num}</em>
                            <span class="plus-num">+</span>
                        </div>
                        <span class="cart-price">￥<span class="cart-price-cls">{$vo.price}</span></span>
                        <span class="cart-delet"></span>
                        <span class="cart-select selected">
                            <input class="check" type="checkbox" name="cart_id[]"  value="{$vo.cartid}" checked/>
                        </span>
                    </div>
                </div>
            </li>
            </foreach>
        </ul>
        <div class="bott-footer"></div>
        <input type="hidden" name="order_type" value="2">
        <input type="hidden" name="cart" value="true">
    </form>
</div>

<!-- 底部链接 -->
<div class="footer-pay clearfix">
    <div class="select-all fl">
        <span ></span>全选
    </div>
    <a href="javascript:;" onclick="form_submit()" class="fr pay-btn">去结算<span class="goods-count"></span></a>
    <span class="tatal-num fr">合计：<em class="price-num">¥0</em></span>    </div>
<script>
    function form_submit(){
        var count=setGoodsCount();
        if(count){
            $('form').submit();
        }else{
            myalert('请选择商品');
        }
    }
</script>
</body>
</html>